<template>
  <div class="structure">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      class="eltab"
    >
      <el-tab-pane label="群组选择" name="first">
        <el-table
          style="width: 100%; font-size: 15px"
          min-height="700"
          :header-cell-style="{
            'text-align': 'center',
            color: '#000',
            background: '#f5f7fa',
          }"
          :data="list"
          v-loading="loading"
          ref="table"
        >
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              <span v-if="scope.$index + 1 < 10">
                00{{ scope.$index + 1 }}</span
              >
              <span v-if="scope.$index + 1 > 9"> 0{{ scope.$index + 1 }}</span>
              <span v-if="scope.$index + 1 > 99"> {{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="type">
            <template slot="header">
              群组类型&nbsp;
              <i class="el-icon-caret-bottom"></i>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="no"
            ><template slot="header">
              群组名称&nbsp;
              <i class="el-icon-caret-bottom"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="title"
            ><template slot="header">
              所在空间&nbsp;<i class="el-icon-caret-bottom"></i>
            </template>
          </el-table-column>

          <el-table-column type="selection"> </el-table-column>
        </el-table>
        <div
          class="bottom-left"
          style="position: fixed; left: 260px; bottom: 60px"
        ></div>
      </el-tab-pane>
      <el-tab-pane label="设备选择" name="second">
        <el-table :data="tableData2" height="315">
          <el-table-column prop="date" label="序号">
            <template slot-scope="scope">
              <span v-if="scope.$index + 1 < 10">
                00{{ scope.$index + 1 }}</span
              >
              <span v-if="scope.$index + 1 > 9"> 0{{ scope.$index + 1 }}</span>
              <span v-if="scope.$index + 1 > 99"> {{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date">
            <template slot="header">
              MAC&nbsp;
              <i class="el-icon-caret-bottom"></i>
            </template>
          </el-table-column>
          <el-table-column prop="name">
            <template slot="header">
              设备类型&nbsp;
              <i class="el-icon-caret-bottom"></i>
            </template>
          </el-table-column>
          <el-table-column prop="address" align="center">
            <template slot="header">
              群组名称&nbsp;
              <i class="el-icon-caret-bottom"></i>
            </template>
          </el-table-column>
          <el-table-column prop="address1">
            <template slot="header">
              所在空间&nbsp;
              <i class="el-icon-caret-bottom"></i>
            </template>
          </el-table-column>
          <el-table-column prop="address2">
            <template slot="header">
              图位编号&nbsp;
              <i class="el-icon-caret-bottom"></i>
            </template>
          </el-table-column>

          <el-table-column type="selection"> </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div class="fh">
      <el-button
        style="color: #000"
        type="text"
        @click="showtjsb = false"
        icon="el-icon-back"
        >返回</el-button
      >
    </div>
  </div>
</template>
<script>
// import { Button } from "element-ui";

export default {
  data() {
    return {
      activeName: "first",
      input: "",
      loading: false,
      tableData2: [
        {
          date: "局端主机1",
          name: "192.168.0.123",
          address: "深圳市海令科技有限公司",
          address1: "SMK-H1-GTW04",
          address2: "30CE0246F0A2 ",
          address3: "V1.2.0",
          address4: "V1.0.2.3",
          address5: "V2.0.0",
        },
        {
          date: "局端主机1",
          name: "192.168.0.123",
          address: "深圳市海令科技有限公司",
          address1: "SMK-H1-GTW04",
          address2: "30CE0246F0A2 ",
          address3: "V1.2.0",
          address4: "V1.0.2.3",
          address5: "V2.0.0",
        },
        {
          date: "局端主机1",
          name: "192.168.0.123",
          address: "深圳市海令科技有限公司",
          address1: "SMK-H1-GTW04",
          address2: "30CE0246F0A2 ",
          address3: "V1.2.0",
          address4: "V1.0.2.3",
          address5: "V2.0.0",
        },
        {
          date: "局端主机1",
          name: "192.168.0.123",
          address: "深圳市海令科技有限公司",
          address1: "SMK-H1-GTW04",
          address2: "30CE0246F0A2 ",
          address3: "V1.2.0",
          address4: "V1.0.2.3",
          address5: "V2.0.0",
        },
      ],
      list: [
        {
          id: "001",
          mac: "温控1",
          type: "冷暖调光驱动",
          title: "25",
          no: "大厅",
        },
        {
          id: "002",
          mac: "客厅筒灯",
          type: "冷暖调光驱动",
          title: "5",
          no: "走廊",
        },
        {
          id: "003",
          mac: "门口灯",
          type: "冷暖调光驱动",
          title: "25",
          no: "总经理办公室",
        },
        {
          id: "003",
          mac: "三色灯",
          type: "冷暖调光驱动",
          title: "25",
          no: "财务室",
        },
        {
          id: "003",
          mac: "三色灯",
          type: "冷暖调光驱动",
          title: "5",
          no: "人力资源部",
        },
        {
          id: "003",
          mac: "三色灯",
          type: "冷暖调光驱动",
          title: "25",
          no: "--",
        },
        {
          id: "003",
          mac: "三色灯",
          type: "冷暖调光驱动",
          title: "25",
          no: "总监室",
        },
        {
          id: "003",
          mac: "三色灯",
          type: "冷暖调光驱动",
          title: "2",
          no: "办公住区2",
        },
        {
          id: "003",
          mac: "三色灯",
          type: "冷暖调光驱动",
          title: "25",
          no: "--",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="scss" scoped>
.structure {
  margin-left: 30px;
  width: calc(100vw - 300px);
  height: calc(100vh - 80px);
}

::v-deep .is-active {
  text-align: center;
  color: aliceblue;
  background: #2559c0 !important;
  border-radius: 1px !important;
}

.pbq {
  font-size: 14px;
  float: left;
  margin-top: 20px;
  color: darkgray;
}

.eltab {
  margin-left: 50px;
}

.input {
  margin-top: 20px;
}

.qxqr {
  margin-top: 20px;
  float: right;
}

.jdzj {
  width: 50%;
}

.ydfw {
  margin-top: 45px;
}

.ydfw1 {
  margin-left: -470px;
}

.bybtn {
  margin-left: 300px;
}

.czdiv {
  display: inline-block;
}

.fh {
  position: fixed;
  right: 50px;
  top: 90px;
}
</style>
